<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.min.js"></script>
    <script src="/elementUI/index.js"></script>
    <link rel="stylesheet" href="/elementUI/index.css">
    <style>
        body {
            margin: 0;
        }
        
        #app {
            width: 100%;
            height: 100vh;
        }
        
        .el-header,
        .el-footer {
            background-color: #23262E;
            color: rgb(216, 215, 215);
            text-align: center;
            line-height: 60px;
        }
        
        .el-aside {
            background-color: #393D49 !important;
            color: #333;
            text-align: center;
            line-height: 200px;
        }
        
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            /* line-height: 160px; */
            padding: 0;
        }
        
        iframe {
            margin: 5px;
        }
        
        .el-menu-item,
        .el-menu-item-group__title {
            background-color: #393D49 !important;
        }
        
        body>.el-container {
            margin-bottom: 40px;
        }
        
        .el-container:nth-child(5) .el-aside,
        .el-container:nth-child(6) .el-aside {
            line-height: 260px;
        }
        
        .el-container:nth-child(7) .el-aside {
            line-height: 320px;
        }
        
        .el-aside {
            height: 90vh;
        }
        
        a {
            text-decoration: none;
            color: rgb(216, 215, 215);
        }
        
        a:hover {
            color: white;
            text-shadow: white 1px 1px 2px;
        }
        
        #ht {
            font-size: 30px;
            position: absolute;
            left: 3%;
        }
        iframe img{
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="app">
        <el-container>
            <el-header style="text-align: right; font-size: 19px">
                <span id="ht">后台管理</span>
                <span>王小虎</span>&nbsp;&nbsp;
                <a href="#">退出</a>&nbsp;
            </el-header>
            <el-container>
                <el-aside width="15%">
                    <el-menu :default-openeds="['1', '2']" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" @select="selectclick" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-setting"></i>系统管理</template>
                            <el-menu-item-group>
                                <el-menu-item index="/user">用户管理</el-menu-item>
                                <el-menu-item index="/role">角色管理</el-menu-item>
                                <el-menu-item index="/permisssion">权限管理</el-menu-item>
                                <el-menu-item index="/log">日志管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                        <el-submenu index="2">
                            <template slot="title">
                                <i class="el-icon-tickets"></i>基础数据</template>
                            <el-menu-item-group>
                                <el-menu-item index="product/product-list.html">产品管理</el-menu-item>
                                <el-menu-item index="/orders">订单管理</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <iframe :src="url" width="97%" height="98%" frameborder="0"></iframe>
                </el-main>
            </el-container>
        </el-container>
    </div>
</body>
<script>
    var v1 = new Vue({
        el: "#app",
        data: {
            url: "/img/tp2.jpg"
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            selectclick(key, keyPath) {
                console.log(key, keyPath);
                this.url = key;
            }
        }
    })
</script>

</html>